<template>
	<view class="bgw">
		<view class="blank10"></view>
		<view class="flex font-24">
			<view class="sort-item flex"  @click="sort('')" :class="!value?'active':''">
				默认
			</view>
			<view class="sort-item flex" :class="value == 'price_desc'||value =='price_asc'?'active':''"  @click="sort(value == 'price_desc'?'price_asc':'price_desc')">
				{{type == 'stock'?'成本':'单价'}}
				<u-icon name="arrow-downward" size="12" color="#675f91" v-if="value == 'price_desc'"></u-icon>
				<u-icon name="arrow-upward" size="12" color="#675f91" v-else-if="value == 'price_asc'"></u-icon>
				<u-icon name="arrow-downward" size="12" color="#333333" v-else></u-icon>
			</view>
			<view class="sort-item flex"  :class="value == 'stock_desc'||value =='stock_asc'?'active':''"  @click="sort(value == 'stock_desc'?'stock_asc':'stock_desc')">
				库存
				<u-icon name="arrow-downward" size="12" color="#675f91" v-if="value == 'stock_desc'"></u-icon>
				<u-icon name="arrow-upward" size="12" color="#675f91" v-else-if="value == 'stock_asc'"></u-icon>
				<u-icon name="arrow-downward" size="12" color="#333333" v-else></u-icon>
			</view>
			<view class="flex-1">
				 <slot name="right"></slot>
			</view>
		</view>
		<view class="blank10"></view>
	</view>
</template>

<script>
	export default {
		name: "sort",
		props: {
			value: String,
			type:String
		},
		data() {
			return {
				
			};
		},
		watch: {
		
		},
		created() {
			
		},
		methods: {
			sort(type){
				if(this.value === type){
					return;
				}
				// this.value = type;
				this.$emit('change',type);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.sort-item{
		padding: 4upx 10upx;
		background-color: #f5f5f5;
		margin-left: 15upx;
		border-radius: 8upx;
		border:1px solid #f5f5f5;
		font-size: 24upx;
	}
	.sort-item.active{
		border-color: #675f91;
		color:#675f91;
		background-color: #ffffff;
	}
</style>